<template>
    <div class="bg-gray-50 min-h-screen flex items-center justify-center font-sans">
        <div class="w-full max-w-md">
            <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200 text-center">
                <!-- 加载状态 -->
                <div v-if="isLoading" class="space-y-4">
                    <div class="w-16 h-16 bg-emerald-600 rounded-full flex items-center justify-center mx-auto">
                        <i class="fas fa-spinner fa-spin text-white text-2xl"></i>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-800">正在处理登录...</h2>
                    <p class="text-gray-600">请稍候，我们正在验证您的身份</p>
                </div>

                <!-- 成功状态 -->
                <div v-else-if="isSuccess" class="space-y-4">
                    <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto">
                        <i class="fas fa-check text-white text-2xl"></i>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-800">登录成功！</h2>
                    <p class="text-gray-600">正在跳转到主页...</p>
                </div>

                <!-- 错误状态 -->
                <div v-else class="space-y-4">
                    <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto">
                        <i class="fas fa-times text-white text-2xl"></i>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-800">登录失败</h2>
                    <p class="text-gray-600">{{ errorMessage }}</p>
                    <div class="space-x-4">
                        <button @click="retryLogin"
                            class="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors">
                            重试
                        </button>
                        <button @click="goToLogin"
                            class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                            返回登录
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { oauthLoginAPI } from '@/http/chatAPI'

const router = useRouter()
const route = useRoute()

const isLoading = ref(true)
const isSuccess = ref(false)
const errorMessage = ref('')

// 处理OAuth回调
const handleOAuthCallback = async () => {
    try {
        const code = route.query.code as string
        const state = route.query.state as string
        const provider = route.query.provider as string || 'google'

        if (!code) {
            throw new Error('授权码不存在')
        }

        // 调用OAuth登录API
        const response = await oauthLoginAPI(provider, code)

        // 保存token和用户信息
        localStorage.setItem('token', response.token)
        localStorage.setItem('user', JSON.stringify(response.user))

        isSuccess.value = true
        isLoading.value = false

        // 延迟跳转
        setTimeout(() => {
            router.push('/')
        }, 2000)

    } catch (error: any) {
        isLoading.value = false
        errorMessage.value = error.message || '第三方登录失败'
    }
}

// 重试登录
const retryLogin = () => {
    isLoading.value = true
    isSuccess.value = false
    errorMessage.value = ''
    handleOAuthCallback()
}

// 返回登录页
const goToLogin = () => {
    router.push('/login')
}

onMounted(() => {
    // 检查是否有错误参数
    const error = route.query.error as string
    if (error) {
        isLoading.value = false
        errorMessage.value = error === 'access_denied' ? '用户取消授权' : '第三方登录失败'
        return
    }

    // 处理OAuth回调
    handleOAuthCallback()
})
</script>

<style scoped>
.font-sans {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.fa-spin {
    animation: spin 1s linear infinite;
}
</style>
